<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            //获取input输入框里的内容
            //input标签是一个对象 而他的内容就是value

                var username = document.getElementById("username");
                var user = username.value;
                var span = document.getElementById("usernameSpan");

                var patt = /^\w{5,12}$/
                //创建一个正则表达式对象用test()方法和username进行判断。
                //正则表达式对象的test()方法就是 符合正则表达式 返回true 不符合 返回false
                if (patt.test(user)) {
                    // alert("该用户名符合规定");
                    span.innerHTML = "该用户名符合规定";
                } else {
                    // alert("该用户名不符合规定");
                    span.innerHTML = "该用户名不符合规定";
                }


        }
    </script>
</head>
<!--
    需求 判断用户名是否合法
    合法规则 仅包含字母数字下划线 5-12位
-->
<body>
    用户名:<input type="text" id="username"/>
    <span id="usernameSpan"></span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>